    <style>
             .box_left_content  h2{
            
            font-size: 23.996px;
            font-weight: normal;
            margin-top: 14px;
        }
        .box_right h2{
            font-size: 23.996px;
        }
        body{
            overflow-y:hidden;
        }
        a{
            text-decoration: none;
            margin-left: 3px;
            color: #005980;
        }
        li{
            
        }
        *{
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp", sans-serif;
        }
        @media screen and (min-height: 700px) {
           .back{
                background:  url('../imgs/bg-left.png')  no-repeat left bottom ,url('../imgs/bg-right.png')  no-repeat right bottom ;

            }
            
    
        }
        .back{
            min-width: 1040px;
             min-height: 99.9vh; 
             

            
            
        }
        /* .box{
            width: 1000px;
            margin:  auto 0; 
            margin: 30px auto;  
        } */
        .banner{
            width: 1000px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            
             box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3); 
        }
        .box_left{
          
            width: 500px;
            min-height: 564px;
            float: left;
           
             background-image:url('./imgs/left-1.png') , url('./imgs/left-2.png') ,linear-gradient(0deg, #3a485a 0%, #607089 100%) ;
            background-repeat: no-repeat;
            background-position: left top ,right bottom;
             /* position:absolute; */
             z-index: 1000;
             
        }
         .box_left_content{
            
                display: flex;
                flex-direction: column;
                margin: 83px 80px 54px;
            color: white;
            /* font-size: 1.714rem */
            }
            .person{
                color: rgba(255, 255, 255, .5);
                font-size: 14px;
                margin-top: 46px;
                
                
            }
            .presentation{
                height: 375px;
               
            }
            .jian{
                margin-top: 14px;
                font-size: 14px;
                line-height: 1.71429;
            }
            .company{
                 position: relative; 
                    font-size: 14px;
                    padding-top: 40px;
                    margin-top: 24px;
                    border-top: 1px solid rgba(255,255,255,0.2);
                }
                .hot{
                        background-color: #C71D23;
                        border-radius: 2px;
                        padding: 2px 6px;
                        margin-bottom: 10px;
                        position: absolute;
                        font-size: 12px;
                        /* left: 68px; */
                        /* top: 34px; */
                        margin-top: -5px;
                        margin-left: -6px;
                        transform: scale(0.84);
                }
                .str{
                    margin: 0px 7px;
                }
                                
                /* .box1_3 img{
                    position: absolute;
                    right: 30px;
                    top: 41px;
                } */
        
        .box_right{
            display: flex;
                flex-direction: column;
            /* margin: 0 auto; */
           padding: 64px 75px 48px;
           background-color: white;
            width: 50%;
            min-height: 564px;
            box-sizing: border-box;
            z-index: 1000;
            float: right;
           

        }
        .rtitle{
           
            margin-bottom: 24px;
        }
       .rtitle h2{
            display: inline;      
        
       }
        .rtitle span{
            font-size: 14px;
            color: #40485b;
            float: right;
            margin-top: 5px;
        }
        .box_right .name{
            width: 350px;
            box-sizing: border-box;
            padding: 9px 14px;
            border-radius: 3px;
            outline: none;
            border: 1px solid #dfe3e9;
        }
        .add{
            display: flex;
            border: 1px solid #dfe3e9;
        }
        .add .http{
             border-right: 1px solid #dfe3e9;
             background-color:#F9F9F9; 
             color: rgba(0, 0, 0, .87);
             padding:8px 11px;
             font-size: 14px;
        }
        .add input{
            padding:9px 0 9px 11px ;
            border: none;
            outline: none;
        }

       .add .eye{

            margin-top: 9px;
            margin-right: 3px;
        }
       
        .add .pass{
            flex: 1;
            padding: 9px 39px 9px 14px;
        }
        button{
           width: 350px;
            padding: 8px 26px;
            background-color: #ff6700;
            color: white;
            border: none;
            border-radius: 3px;
        }
        .ontherlogin{
            margin-top: 42px ;
            font-size: 14px;
            line-height: 1.4;
            
        }
        
        .ontherlog{
            margin-top: 24px;
           
           
        }
        .a{
             
             position:relative;
            
             width: 100%;
             height: 40px;
             line-height: 40px;

        }

       
        .login{
           
            /* position: absolute; */
            left: 0px;
            top: 0px;
        }
        
        .icon{
            width:350px;
            padding-top: 24px;
            display: flex; 
            justify-content : space-around;
            /* text-align: center; */
        }
        .icon img{
            /* margin-left: 19%; */
        }
        .icon .wh{
            margin-left: 0;
        }
        .bottom{
           
            width: 100%;
            margin-top:70%;
            position: absolute;
           
            text-align: center;
           
           
        } 
        .bottom span{
            margin-left: 2%;
            color: #8C92A4;
            font-size: 14px

        }
       
        
         li{
            
           
            width: 350px ;
            list-style: none;
            color: rgba(238, 238, 238, .6);

          
            margin-top:17.45px ;
        }
        .mark{
            margin-left: 10px;
            margin-top: 3px;
        }
        .ocs{
    display:flex;
    margin-top:40px;
    height:40px;
    line-height:40px;  
    margin-left:50px;
    font-size: 16px
    }
     .ocs .ccc{
        width:40px;
        height:40px;
        line-height: 40px;
        text-align: center;
        background-color: rgb(69, 177, 40);
        border-radius:50%;
        margin:0 15px;
    }
        
    .ocs .ccc .clogin{
        font-size: 20px;
        font-weight: bold;
        color: white;
    }
    .qita-font{
        display:flex;
        justify-content : space-between;
        margin-top:30px;
        height:20px;
        line-height:20px;
        color: #8C92A4;
    }
    .qita-font .line{
        width:122px;
        border-top:1px solid #ccc;
        margin-top:10px;
    }
    .my{
        color: rgba(0, 0, 0, 0.6);
        font-size: 14px;

    }
    .people{
        margin-left: 12px;
    }
    .box_right .active{
        background-color: #fff0f0;
        border: 1px solid #dbb1b1;
        border-left: 3px solid #d95c5c;
        border-radius: 0em 0.2857rem 0.2857rem 0em;
    }
    .message{
        
        color: #d95c5c;
        font-size: 13px;
        margin: 13px 0;
    }
   /*  .name:focus + .message{
        display: block;
    } */

    </style>